@mixin flex($fg: 1, $fs: null, $fb: null) {
  flex: $fg $fs ($fb/12)*100%;
}

@mixin button-style($color, $text-color:'') {
  border-color: darken($color, 10%);
  background-color: $color;
  color: $color;
  @if $text-color=="" {
    $text-color: $light;
  }
  color: $text-color;
  &:hover {
    background-color: darken($color, 5%);
  }
}

@mixin badge-style($color, $text-color:'') {
  background: $color;
  @if $text-color=="" {
    $text-color: $light;
  }
  color: $text-color;
}

@mixin button-outline($color, $text-color:'') {
  &.button-outline {
    background: transparent;
    @if $text-color=="" {
      $text-color: $light;
    }
    border-color: darken($color, 10%);
    color: $text-color;
    &:hover {
      background-color: $stable-ec;
    }
  }
}

@mixin button-clear() {
  &.button-clear {
    background: transparent;
    border-width: 0;
  }
}

